<template>
    <div class="container">
        <div class="content">
            <div class="left">
                <div class="poster" v-if="!isPlaying">
                    <img :src="detail.videoposter" />

                    <div class="play-btn" @click="isPlaying = true">
                        播放视频简介

                        <img
                            class="icon-play"
                            :src="`${_oss_}images/case-detail/icon-play.svg`"
                        />
                    </div>
                </div>

                <video
                    :src="detail.introductionfile"
                    autoplay
                    controls
                    controlslist="nodownload"
                    v-else
                ></video>
            </div>

            <div class="right">
                <div class="title">{{ detail.name }}</div>

                <div class="cb">{{ detail.page_view }}人学过</div>

                <div class="btn-group">
                    <div
                        class="btn btn-primary"
                        :class="{ disabled: !detail.url }"
                        @click="emits('onCaseView')"
                    >
                        案例视频
                    </div>
                    <div
                        class="btn btn-default"
                        @click="emits('onCaseExperience')"
                    >
                        案例体验
                    </div>
                </div>
            </div>
        </div>

        <div class="tabs">
            <div
                class="tab-item"
                v-for="(item, index) in tabList"
                :key="item.value"
                :class="{
                    active: tabActive === index,
                }"
                @click="tabActive = index"
            >
                {{ item.label }}
            </div>
        </div>
    </div>

    <div
        class="introduce-container"
        v-if="tabList[tabActive].value === 'introduce'"
    >
        <div class="desc" v-html="detail.synopsiscontent || ''"></div>
    </div>

    <!-- <div
        class="catalog-container"
        v-if="tabList[tabActive].value === 'catalog'"
    >
        <div class="top">目录</div>

        <div class="list">
            <div class="chapterhead">
                <div class="chaptertitle">章节1:</div>
                <div class="chaptername">AI大模型账号注册及获取API Key</div>
            </div>
            <div class="section">
                <div class="ks">课时1</div>
                <div class="type-title">视频</div>
                <div class="ksname">新手快速注册AI大模型账号（2024年更新）</div>
                <div></div>
            </div>
        </div>
    </div> -->
</template>
<script setup>
const props = defineProps({
    detail: {
        type: Object,
        default: () => ({}),
    },
});
const emits = defineEmits(["onCaseView", "onCaseExperience"]);
const isPlaying = ref(false);

const tabActive = ref(0);
const tabList = reactive([
    {
        label: "介绍",
        value: "introduce",
    },
    {
        label: "目录",
        value: "catalog",
    },
    {
        label: "笔记",
        value: "note",
    },
    {
        label: "讨论区",
        value: "discussion",
    },
]);
</script>
<style lang="scss" scoped>
.container {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    box-shadow: 0px 1px 2px #bbb;

    .content {
        display: flex;
        background-color: #fff;
        padding: 20px 0 20px 20px;

        .left {
            position: relative;
            width: 450px;
            height: 250px;

            .poster {
                width: 100%;
                height: 100%;
                box-shadow: 0px 0px 3px #aaa;
            }

            video {
                width: 100%;
                height: 100%;
                background-color: #000;
            }

            .play-btn {
                display: flex;
                align-items: center;
                position: absolute;
                left: 50%;
                top: 50%;
                background-color: rgba(240, 240, 240, 0.8);
                border: 2px solid #fff;
                color: #333;
                border-radius: 40px;
                transform: translate(-50%, -50%);
                padding: 8px 14px;
                font-size: 20px;
                cursor: pointer;
                user-select: none;

                .icon-play {
                    width: 30px;
                    height: 30px;
                    margin-left: 10px;
                }
            }
        }

        .right {
            display: flex;
            flex-direction: column;
            margin-left: 30px;

            .title {
                font-size: 24px;
                color: #333;
                line-height: 1.2;
            }

            .cb {
                margin-top: 15px;
                color: #999;
                font-size: 14px;
            }

            .btn-group {
                margin-top: auto;

                .btn {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 160px;
                    height: 45px;
                    font-size: 20px;
                    cursor: pointer;

                    &-default {
                        color: #666;
                        border: 1px solid #666;
                        margin-left: 20px;
                        box-sizing: border-box;

                        &:hover {
                            border: 1px solid #ff3f29;
                            color: #ff3f29;
                        }
                    }

                    &-primary {
                        background: #ff8000;
                        color: #fff;

                        &:hover {
                            background: #ee6600;
                        }
                    }

                    &.disabled {
                        color: #fff;
                        background-color: #ccc;
                        cursor: default;
                    }
                }
            }
        }
    }

    .tabs {
        display: flex;
        align-items: center;
        background-color: #fafafa;
        padding-left: 8px;
        border-top: 1px solid #eaeaea;
        width: 100%;
        height: 36px;

        .tab-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 24px;
            border-radius: 4px;
            font-size: 14px;
            margin: 0 10px;
            cursor: pointer;
            user-select: none;

            &.active {
                background-color: #333;
                color: #fff;
            }
        }
    }
}

.introduce-container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    background-color: #fff;
    margin-top: 15px;
    box-shadow: 0px 1px 2px #bbb;

    .desc {
        color: #444;
        word-break: break-all;
        white-space: pre-wrap;
        font-size: 16px !important;
        font-family: "宋体" !important;
        line-height: 1.5em !important;

        :deep(*) {
            font-size: 16px !important;
            font-family: "宋体" !important;
            line-height: 1.5em !important;
        }

        :deep(img) {
            max-width: 100%;
            display: block;
        }
    }
}

.catalog-container {
    width: 1200px;
    margin: 15px auto 0;
    box-shadow: 0px 1px 2px #bbb;

    .top {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 15px;
        font-size: 18px;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
    }

    .list {
    }
}
</style>
